<template>
    <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
        <colgroup>
            <col v-for="(column, index) in columns" :width="setCellWidth(column)" :key="index">
        </colgroup>
        <tbody :class="[prefixCls + '-tbody']">
            <template v-for="(row, index) in data">
                <table-tr
                    :draggable="draggable"
                    :row="row"
                    :key="rowKey ? row._rowKey : index"
                    :prefix-cls="prefixCls"
                    @mouseenter.native.stop="handleMouseIn(row._index)"
                    @mouseleave.native.stop="handleMouseOut(row._index)"
                    @click.native="clickCurrentRow(row._index)"
                    @dblclick.native.stop="dblclickCurrentRow(row._index)">
                    <td v-for="(column, cindex) in columns" :class="alignCls(column, row)" :key="`${rowKey ? row._rowKey : index}-${cindex}`">
                        <template  v-if="!isFixeColumn(column) || forceRenderHidenCell(column)">
                            <div :class="getCellClass(column)">
                                <template v-if="checkCellRenderType(column, 'index')">
                                    <span>{{ column.indexMethod ? column.indexMethod(row) : (index + 1) }}</span>
                                </template>
                                <template v-else-if="checkCellRenderType(column, 'selection')">
                                    <Checkbox :value="rowChecked(row._index)"
                                    @click.native.stop="handleCellClick(row._index)"
                                    @on-change="cellToggleSelect(row._index)"
                                    :disabled="rowDisabled(row._index)"></Checkbox>
                                </template>
                                <template v-else-if="checkCellRenderType(column, 'html')">
                                    <span v-html="row[column.key]"></span>
                                </template>
                                <template v-else-if="(checkCellRenderType(column, 'normal') && !column.tooltip)">
                                        <span>{{ row[column.key] }}</span>
                                </template>
                                <Expand
                                    v-else-if="checkCellRenderType(column, 'render')"
                                    :row="row"
                                    :column="column"
                                    :index="row._index"
                                    :render="column.render"></Expand>
                                <table-slot
                                    v-else-if="checkCellRenderType(column, 'slot')"
                                    :row="row"
                                    :column="column"
                                    :index="row._index">
                                    </table-slot>
                                <template v-else-if="checkCellRenderType(column, 'expand') && !row._disableExpand">
                                    <div :class="[`${prefixCls}-cell-expand`,{[`${prefixCls}-cell-expand-expanded`]: rowExpanded(row._index)}]" @click="cellToggleExpand(row._index)">
                                        <Icon type="ios-arrow-forward"></Icon>
                                    </div>
                                </template>
                                <table-cell
                                    v-else
                                    :key="`${row._rowKey}-${cindex}`"
                                    :row="row"
                                    :column="column"
                                    :index="row._index"
                                ></table-cell>
                            </div>
                        </template>
                    </td>
                </table-tr>
                <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}" :key="`e-${rowKey ? row._rowKey : index}`">
                    <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
                        <Expand :row="row" :render="expandRender" :index="row._index"></Expand>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>
<script>
    // todo :key="row"
    import TableTr from './table-tr.vue';
    import TableCell from './cell.vue';
    import Icon from '../icon/icon.vue';
    import TableSlot from './slot';
    import Expand from './expand.js';
    import Mixin from './mixin';

    export default {
        name: 'TableBody',
        mixins: [ Mixin ],
        components: { TableCell, Expand, TableTr, TableSlot, Icon},
        props: {
            prefixCls: String,
            styleObject: Object,
            columns: Array,
            data: Array,    // rebuildData
            objData: Object,
            columnsWidth: Object,
            fixed: {
                type: [Boolean, String],
                default: false
            },
            draggable: {
                type: Boolean,
                default: false
            },
            fixedForce: {
                type: Boolean,
                default: true
            },
            rowKey: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                columnsCache: Object.freeze({})
            }
        },
        computed: {
            expandRender () {
                let render = function () {
                    return '';
                };
                for (let i = 0; i < this.columns.length; i++) {
                    const column = this.columns[i];
                    if (column.type && column.type === 'expand') {
                        if (typeof column.render === 'function') {
                            render = column.render;
                            break;
                        }
                    }
                }
                return render;
            }
        },
        methods: {
            rowChecked (_index) {
                return this.objData[_index] && this.objData[_index]._isChecked;
            },
            rowDisabled(_index){
                return this.objData[_index] && this.objData[_index]._isDisabled;
            },
            rowExpanded(_index){
                return this.objData[_index] && this.objData[_index]._isExpanded;
            },
            handleMouseIn (_index) {
                this.$parent.handleMouseIn(_index);
            },
            handleMouseOut (_index) {
                this.$parent.handleMouseOut(_index);
            },
            clickCurrentRow (_index) {
                this.$parent.clickCurrentRow(_index);
            },
            dblclickCurrentRow (_index) {
                this.$parent.dblclickCurrentRow(_index);
            },
            getCellRenderType(column) {
                let renderType;
                if (column.type === 'index') {
                    renderType = 'index';
                } else if (column.type === 'selection') {
                    renderType = 'selection';
                } else if (column.type === 'html') {
                    renderType = 'html';
                } else if (column.type === 'expand') {
                    renderType = 'expand';
                } else if (column.render) {
                    renderType = 'render';
                } else if (column.slot) {
                    renderType = 'slot';
                } else {
                    renderType = 'normal';
                }
                return renderType;
            },
            checkCellRenderType(column, type) {
                let renderType = this.getCellRenderType(column);
                return renderType === type;
            },
            getCellClass(column, index) {
                return [
                    `${this.prefixCls}-cell`,
                    {
                        [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'),
                        [`${this.prefixCls}-cell-ellipsis`]: column.ellipsis || false,
                        [`${this.prefixCls}-cell-with-expand`]: this.checkCellRenderType(column, 'expand'),
                        [`${this.prefixCls}-cell-with-selection`]: this.checkCellRenderType(column, 'selection')
                    }
                ];
            },
            cellToggleExpand (index) {
                this.$parent.toggleExpand(index);
            },
            cellToggleSelect (index) {
                this.$parent.toggleSelect(index);
            },
            handleCellClick (index) {
                // 放置 Checkbox 冒泡
            }
        }
    };
</script>
